<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
           header{
                padding-left: 150px;
           }
            .head{
                position: relative;
                height: 350px;
            }
           
            .center{
                position: absolute;
                width: 100%;
                top: 40%;
                text-align: center;
                color: ivory;
                font-size: 50px;
              
            }
            ul{
                list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color:black;
            }
            li{
                display: inline-block;
                border-right: 1px solid black;
            }
            li a, .dropbtn{
                display: inline-block;
                color: burlywood;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
                font-weight: bold;
                font-size: x-large;
            }
            li a:hover, .dropbtn:hover{
                background-color: darkcyan;
            }
            li.dropdown{
                display: inline-block;
            }
            .dropdown-content{
                display: none;
                position: absolute;
                background-color: azure;
                box-shadow: 0px 8px 16px 0px;
                z-index: 1;
            }
            .dropdown-content a{
                color: black;
                padding: 12px 16px;
                text-decoration: none;
                display: block;
                text-align: left;
            }
            .dropdown-content a:hover{
                background-color: darkgrey;
            }
            .dropdown:hover .dropdown-content{
                display: block;
            }
            .sidenav {
                height: 100%;
                width: 160px;
                position: fixed;
                z-index: 1;
                top: 0;
                left: 0;
                background-color: black;
                overflow-x: hidden;
                padding-top: 20px;
            }
            .sidenav img{
                width: 160px;
                height: 30%;
                padding-top: 99px;
                
            }
            .sidenav p{
                font-size: 30px;
                font-weight: bolder;
                color: white;
                padding: 6px 8px 6px 16px;
            }
            .sidenav a {
                padding: 6px 8px 6px 16px;
                text-decoration: none;
                font-size: 25px;
                color: #818181;
                display: block;
                padding-bottom: 35px;
            }
            .sidenav a:hover{
                color: azure;
            }
            main {
                position: relative;
                margin-left: 160px;
                font-size: 28px; 
            }
            div.gallery {
            margin: 10px;
            border: 10px solid white;
            float: left;
            width: 600px;
            box-shadow: 10px 10px 10px; 
            }           
           div.desc {
           padding: 15px;
           text-align: center;
           color:black;
           }
           footer{
	clear:both;
	display:block;
	background-color: black;
	color:white;
	text-align:center;
	padding:15px;
 }
        </style>
    </head>
    <body>
        <header>
            <div class="head">
                <img width="100%" height="350px" src="1.jpg">
            <div class="center">
                型月四大女主角
                <br>
            </div>
            </div>
            <topnav>
                <ul>
                    <li>
                        <a href="index.html">TYPE-MOON</a>
                    </li>
                    <li>
                        <a href="3.html">空之境界</a>
                    </li>
                    <li class="dropdown">
                        <div class="dropbtn">fate </div>
                        <div class="dropdown-content">
                            <a href="4.html">更多</a>
                        </div>
                    </li>
                    <li>
                        <a href="http://typemoon.com/products/tsukihime/">月姬R</a>
                    </li>
                    <li>
                        <a href="http://typemoon.com/products/mahoyo/windows/">魔法使之夜</a>
                    </li>
                    <li style="float:right">
                        <a class="active" href="1.html">了解更多</a>
                    </li>
                </ul>
            </topnav>
        </header>
        <main>
            <div class="sidenav">
                <p>目录</p>
                <a href="#世界观概述">世界观概述</a>
                <a href="#角色简介">角色简介</a>
                <a href="#最新资讯">最新资讯</a>
                <a href="2.html">报告</a>
            </div>
            <p id="世界观概述"></p>
            <h2>世界观概述</h2>
            <img width="100%" height= "350px" src="4.jpg">
            型月世界观起源于蘑菇的《魔法使之夜》，这也是整个月世界的起点。在这部作品中确定了魔法、魔术以及魔术协会和圣堂教会的概念，在后来的空之境界、Fate以及月姬等衍生作品中使用的都是这一整套世界观。其中一个根源，两种抑制力，五大魔法，与27死徒是月世界的独特概念。
            <p id="角色简介"></p>
            <h2>型月四姬</h2>
            <div class="gallery">               
        <img src="2.jpg" width="600" height="400">
    </a>
    <div class="desc">两仪式，是系列小说及动画《空之境界》及其衍生作品的女主角，拥有直死之魔眼的少女，也是四大退魔家族之一两仪家的继承人，含有多重人格，其中一个人格使肉体与根源连接。<br>
     </div>
  </div>
  <div class="gallery">
                      
    <img src="7.jpg" width="600" height="400">
  </a>
  <div class="desc">阿尔托莉雅·潘德拉贡，《Fate/stay night》的女主角之一，在TYPE-MOON出品的其他作品中也多有出场。生前为古不列颠传说中的亚瑟王。在第四、五次圣杯战争中一直以“Saber”职阶被召唤到现世参加圣杯战争。<br>
   </div>
</div>
<div class="gallery">
                      
  <img src="6.jpg" width="600" height="400">
</a>
<div class="desc">天生的吸血种“真祖”之一，亦是位列“王族”的存在，被称为“真祖的公主”，虽然是吸血鬼，但本身并不喜欢吸血，其真实身份为真祖们所准备的处刑者，为了消灭在镇上引起连续猎奇杀人事件的另一名吸血鬼而来。<br>
 </div>
</div>
<div class="gallery">
                      
<img src="5.jpg" width="600" height="400">
</a>
<div class="desc">苍崎青子是TYPE-MOON发行的游戏《月姬》《魔法使之夜》系列中的角色。现存活着的少数几位魔法使之一，苍崎橙子之妹。使用第五魔法，别名“魔法·青”。被魔术师们以“Magic Gunner”、“Miss Blue”等名来称呼。身为魔法使加上是破坏高手，而且还有点人格失常，因此而被魔术协会看待成麻烦人。<br>
</div>
</div>
<div>
    <img width="100%" height= "350px" src="1.webp">
    <p id="最新资讯"></p>
<h2>最新资讯</h2>
<h5>1</h5>
12.31日播出《fate/strange fake》（热知识 12.31是月球传统节日，每年都会播放新动画）
 <h5>2</h5>
《魔法使之夜》剧场版制作决定，由ufotable制作，档期未定。
<h5>3</h5>
《空之境界》推出俯瞰风景播出15周年新企划。
</div>
        </main>
    <footer>avid制作</footer>
                
                